<template>
  <div class="yd" id="yd">
    <div class="yd-box">
      <div class="yd-left">
        <Search />
        <Banner />
        <Hotel />
        <HotArea />
      </div>
      <div class="yd-right" ref="rightBox">
        <swiper
          ref="mySwiper"
          class="mySwiper"
          :loop="true"
          :autoplay="{
            delay: 3000,
            disableOnInteraction: false,
          }"
          :navigation="true"
          :pagination="{
            clickable: true,
          }"
          :modules="[Autoplay, Pagination]"
        >
          <swiper-slide
            v-for="(item, ind) in recommondCitys"
            :key="ind"
            class="swiperSlide"
          >
            <div class="weather">
              <div class="weather-city">{{ item["cityName"] }}酒店口碑榜</div>
              <div class="weather-box">
                <i
                  class="weather-icon"
                  :class="`qi-${item.weatherInfo.icon}`"
                ></i>
                <span class="weather-temp">{{ item.weatherInfo.temp }}℃</span>
                <span>{{ item.weatherInfo.windDir }}</span>
              </div>
            </div>
            <ul class="recommendCityHotal">
              <li v-for="(ele, index) in item.recommendCityHotal" :key="index">
                <div class="ele-city">
                  <img :src="ele.img" alt="" />
                  <div class="hotal-info">
                    <div class="hotal-name">{{ ele.hotelName }}</div>
                    <div class="hotal-price">￥{{ ele.price }} 起</div>
                  </div>
                </div>
              </li>
            </ul>
            <img class="weather-hotal-img" :src="item.imgUrl" alt="" />
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="footer">
      <div class="title-font">某程旅行保障</div>
      <div class="item-box">
        <div class="item" v-for="(item, ind) in guaranteeList" :key="ind">
          <img class="image" :src="item.url" alt="" />
          <div class="desc">
            <div class="item-type">
              <span>{{ item.type }}</span> <i>·</i> <span>{{ item.tag }}</span>
            </div>
            <div class="item-desc">{{ item.desc }}</div>
            <div class="item-desc">{{ item.guarantee }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper";
import "swiper/css";
import "swiper/css/pagination";

import Banner from "./Banner.vue";
import Search from "./Search.vue";
import Hotel from "./Hotel.vue";
import HotArea from "./HotArea.vue";

import { getDict, getRecommendCityHotal } from "@/api/home";

// 获取热门推荐城市酒店
const recommondCitys: any = ref([]);
const getRecommendCityHotalList = async () => {
  recommondCitys.value = await getRecommendCityHotal();
};

// 酒店推荐动画
const dom: any = document.getElementsByClassName("el-main")[0];
const mySwiper = ref();
const rightBox = ref();

dom
  ? (dom.onscroll = () => {
      const mySwiperH = mySwiper.value.$el.offsetHeight;
      const rightBoxH = rightBox.value.offsetHeight;
      const maxH = rightBoxH - mySwiperH
      const scrollTop = dom?.scrollTop;
      const translateY = Math.min(scrollTop, maxH);
      mySwiper.value.$el.style.transform = `translateY(${translateY}px)`;
    })
  : "";

// 某程旅行保障
const guaranteeList: any = ref([]);
const getGguaranteeList = async () => {
  const list = await getDict({ dictValue: "travel_guarantee" });
  guaranteeList.value = list;
};

onMounted(async () => {
  getRecommendCityHotalList();
  getGguaranteeList();
});
</script>

<style scoped lang="scss">
.yd {
  width: 1180px;
  margin: auto;
  &-box {
    display: flex;
  }
  &-left {
    flex: 1;
  }
  &-right {
    width: 428px;
    margin-left: 30px;
    img {
      width: 100%;
    }
    ::v-deep(.swiper) {
      width: 100%;
      border-radius: 16px;
      /* height: 100%; */
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        border-radius: 16px;
        /* Center slide text vertically */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        img {
          // border-radius: 16px;
        }
      }
      .swiper-pagination {
        position: absolute;
        top: 110px;
        left: 10px;
        width: auto;
        .swiper-pagination-bullet {
          background: rgba(255, 255, 255, 0.8);
        }
        .swiper-pagination-bullet-active {
          background: #fff;
          width: 40px;
          border-radius: 5px;
        }
      }
    }
    .weather {
      position: absolute;
      top: 25px;
      left: 10px;
      color: #fff;
      text-align: left;
      .weather-icon {
        font-size: 32px;
        margin-right: 5px;
      }
      .weather-temp {
        margin-right: 5px;
      }
      .weather-city {
        font-size: 18px;
      }
    }
    .recommendCityHotal {
      position: absolute;
      top: 25px;
      right: 15px;
      li {
        width: 200px;
        // height: 60px;
        margin-bottom: 10px;
        padding: 5px;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        cursor: pointer;
        img {
          display: inline-block;
          width: 50px;
          height: 50px;
          border-radius: 10px;
          margin-right: 8px;
        }
        .ele-city {
          display: flex;
        }
        .hotal-info {
          flex: 1;
          display: grid;
          text-align: left;
          color: #fff;
          .hotal-name {
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
    .weather-hotal-img {
      height: 680px;
    }
  }
  .footer {
    margin-top: 30px;
    .title-font {
      font-size: 24px;
    }
    .item-box {
      margin-top: 20px;
      width: 100%;
      .item {
        display: inline-flex;
        width: 25%;
        margin-bottom: 15px;
        .image {
          width: 44px;
          height: 44px;
        }
        .desc {
          font-size: 14px;
          margin-left: 8px;
          .item-type {
            font-size: 16px;
          }
          .item-desc {
            color: #999999;
          }
        }
      }
    }
  }
}
</style>

<style>
/* .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
} */
</style>
